import React,{useState,useEffect} from 'react'
import {history} from 'umi'
import axios from 'axios'
import { Toast,Dialog } from 'react-vant';
import { Passed } from '@react-vant/icons'
import HeaderNav from '../../../../components/ayq/HeaderNav'
import './index.less'

export default function Address() {
  const [data,setdata] = useState([])
  const [visible, setVisible] = useState(false)
  const [delid,setDelid] = useState('')

  const del = async ()=>{
    setVisible(false)
    Toast({
      message: '删除成功',
      icon: <Passed  />,
    })
    const {data} = await axios.get("http://localhost:3000/deladdress?id="+delid)
    if(data.code === 200){
      getData()
    }
  }

  const ondel = async (id)=>{
    setDelid(id)
    setVisible(true)
  }

  const getData = async () => {
    const {data} = await axios.get('http://localhost:3000/address')
    if(data.code === 200){
      setdata(data.data)
    }
  }

  useEffect(()=>{
    getData()
  },[])
  return (
    <div className='address'>
      <HeaderNav title="地址管理"/>
      <div className='address-body'>
        {
          data.map(item=>(
            <div className='address-body-info' key={item._id}>
              <div className='address-body-info-left'>
                <p className='topinfo'>{item.name} {item.tel} {item.default && <span>默认</span>}</p>
                <p className='btninfo'>{item.detailaddr}</p>
              </div>
              <div className='address-body-info-right'>
                <img src="/ayqimg/u5407.png" alt="" onClick={()=>history.push('/upaddress',{...item,region:item.region.join('/')})}/>
                <img className='setimgsize' onClick={()=>ondel(item._id)} src="https://www.axured.cn/assets/axurefiles/dd9eb05e6076c704b2c1e0053def3cc6/images/%E5%9C%B0%E5%9D%80%E7%AE%A1%E7%90%86/u5414.svg" alt="" />
              </div>
            </div>
          ))
        }
      </div>
      <div className='address-btom'>
        <button onClick={()=>history.push('/adaddress')}>新增地址</button>
      </div>
      <Dialog
        visible={visible}
        title='确定删除地址？'
        showCancelButton
        onConfirm={() => del()}
        onCancel={() => setVisible(false)}
      ></Dialog>
    </div>
  )
}
